<template>
    <view class="contents">
        <view
            style="
                background-color: #ffffff;
                border-top-left-radius: 20rpx;
                border-top-right-radius: 20rpx;
                width: 100%;
            "
        >
            <view
                style="
                    width: 100%;
                    height: 100rpx;
                    line-height: 100rpx;
                    font-size: 30rpx;
                    font-weight: bold;
                    text-align: center;
                "
            >
                开始签名
            </view>
            <canvas
                class="firstCanvas"
                canvas-id="firstCanvas"
                disable-scroll="true"
                @touchmove="move"
                @touchstart="start($event)"
                @touchend="end"
                @touchcancel="cancel"
                @longtap="tap"
                @error="error"
            />
            <view class="caozuo mt20">
                <view class="chongqian" @tap="clearClick"> 重签 </view>
                <view class="over" @click="overSign"> 完成签名 </view>
            </view>
        </view>
        <view class="caozuo1" />
    </view>
</template>

<script>
var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
var _that;
//获取系统信息
uni.getSystemInfo({
    success: function (res) {
        canvasw = res.windowWidth;
        canvash = res.windowHeight;
    }
});

export default {
    props: {
        value: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            signImage: "",
            isEnd: false // 是否签名
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    mounted: function (options) {
        _that = this;
        //获得Canvas的上下文
        content = uni.createCanvasContext("firstCanvas", _that);
        console.log("content", content);
        //设置线的颜色
        content.setStrokeStyle("#000");
        //设置线的宽度
        content.setLineWidth(5);
        //设置线两端端点样式更加圆润
        content.setLineCap("round");
        //设置两条线连接处更加圆润
        content.setLineJoin("round");
    },
    methods: {
        overSign: function () {
            if (_that.isEnd) {
                uni.canvasToTempFilePath({
                    canvasId: "firstCanvas",
                    success: function (res) {
                        //打印图片路径
                        console.log(res.tempFilePath);
                        console.log("完成签名");
                        //设置图片
                        _that.signImage = res.tempFilePath;
                        _that.$emit("update:modelValue", res.tempFilePath);
                    }
                });
                _that.clearClick();
            } else {
                uni.showToast({
                    title: "请先完成签名",
                    icon: "none",
                    duration: 1500,
                    mask: true
                });
            }
        },

        // 画布的触摸移动开始手势响应
        start: function (event) {
            // console.log(event)
            // console.log("触摸开始" + event.changedTouches[0].x)
            // console.log("触摸开始" + event.changedTouches[0].y)
            //获取触摸开始的 x,y
            let point = {
                x: event.changedTouches[0].x,
                y: event.changedTouches[0].y
            };
            // console.log(point)
            touchs.push(point);
        },
        // 画布的触摸移动手势响应
        move: function (e) {
            let point = {
                x: e.touches[0].x,
                y: e.touches[0].y
            };
            // console.log(point)
            touchs.push(point);
            if (touchs.length >= 2) {
                this.draw(touchs);
            }
        },

        // 画布的触摸移动结束手势响应
        end: function (e) {
            // 设置为已经签名
            this.isEnd = true;
            console.log("end");
            // 清空轨迹数组
            touchs.pop();
            // for (let i = 0; i < touchs.length; i++) {
            // 	touchs.pop()
            // }
        },

        // 画布的触摸取消响应
        cancel: function (e) {},

        // 画布的长按手势响应
        tap: function (e) {},
        //画布触摸错误
        error: function (e) {},

        //绘制
        draw: function (touchs) {
            let point1 = touchs[0];
            let point2 = touchs[1];
            touchs.shift();
            content.moveTo(point1.x, point1.y);
            content.lineTo(point2.x, point2.y);
            content.stroke();
            content.draw(true);
        },
        //清除操作
        clearClick: function () {
            // 设置为未签名
            this.isEnd = false;
            //清除画布
            content.clearRect(0, 0, canvasw, canvash);
            content.draw(true);
        }
    }
};
</script>

<style>
.ts {
    color: #ff485d;
    font-size: 30rpx;
    height: 100rpx;
    line-height: 100rpx;
    padding-left: 20rpx;
}

canvas {
    background-color: #f2f2f2;
    width: 100%;
    height: 20vh;
    /* margin: 0 25rpx; */
    /* height: calc(100vh - 140rpx); */
}

.contents {
    width: 100%;
    padding-top: 20rpx;
    padding-bottom: 100rpx;
    box-sizing: border-box;
}

#signatureImg {
    background-color: #eeeeee;
}

.caozuo1 {
    display: flex;
    height: 0;
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
    width: 750rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #0599d7;
}

.caozuo {
    display: flex;
    height: 100rpx;
    width: 100%;
    margin-top: 20rpx;
    font-size: 28rpx;
}

.caozuo view {
    width: 40%;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    color: #ffffff;
    margin-left: 5%;
    border-radius: 40rpx;
}

.caozuo view:last-child {
    width: 40%;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    color: #ffffff;
    margin-left: 10%;
}

.caozuo view:active {
    background-color: #cccccc;
    color: #333333;
}

.chongqian {
    background-color: #ff8f58;
    border-radius: 40rpx;
}

.over {
    background-color: #0599d7;
    border-radius: 40rpx;
}
</style>
